<template>
	<div class="task-list-container">
		<div
			v-for="(taskItem, taskIndex) in dataList"
			:key="taskIndex"
			class="flex-start-center"
		>
			<jk-button size="mini" class="el-icon-view item-gap" @click="onSeeSpecBtn(taskItem)">工艺</jk-button>
			<el-tag
				style="margin: 2px 0;width: 100%;"
				:type="setTagType(taskItem)"
				effect="dark"
			>
				<div class="task-list-item">
					<div class="flex-start-center" style="width: 220px;">
						<div class="task-list-item_label">{{ taskIndex + 1 }}、品种: </div>
						<div class="task-list-item_val">{{ taskItem.productName || '无' }}</div>
					</div>
					<div class="flex-start-center" style="width: 200px;">
						<div class="task-list-item_label">批号: </div>
						<div class="task-list-item_val">{{ taskItem.batchCode || '无' }}</div>
					</div>
					<div class="flex-start-center" style="width: 200px;">
						<div class="task-list-item_label">{{ getColorInfoByProcess(taskItem.processCode).inputName || '输入颜色' }}: </div>
						<div class="task-list-item_val">{{ taskItem.inputTubeColorList && taskItem.inputTubeColorList.length ? taskItem.inputTubeColorList.map(x => x.name).join(',') : '无' }}</div>
					</div>
					<div class="flex-start-center" style="width: 200px;">
						<div class="task-list-item_label">{{ getColorInfoByProcess(taskItem.processCode).outName || '输出颜色' }}: </div>
						<div class="task-list-item_val">{{ taskItem.outputTubeColorList && taskItem.outputTubeColorList.length ? taskItem.outputTubeColorList.map(x => x.name).join(',') : '无' }}</div>
					</div>
					<div class="flex-start-center" style="width: 200px;cursor: pointer;" @click="onJump(taskItem.productOrderId, 'editPrdOrder')">
						<div class="task-list-item_label">生产订单: </div>
						<div class="task-list-item_val">{{ taskItem.productOrderCode || '无' }}</div>
					</div>
					<div class="flex-start-center" style="width: 200px;cursor: pointer;" @click="onJump(taskItem.prdNoticeId, 'editProductionNoticeOrder')">
						<div class="task-list-item_label">通知单号: </div>
						<div class="task-list-item_val">{{ taskItem.prdNoticeCode || '无' }}</div>
					</div>
				</div>
			</el-tag>
		</div>
		<machine-technology-detail-dialog
			:data-item="technologyOrderItem"
			:dialog-state="technologyDetailDialogState"
			@on-visible-change="onVisibleChangeOfTechnologyDetailDialog"
		></machine-technology-detail-dialog>
	</div>
</template>
<script>
    import { openStateList } from '../../../../utils/jk/status-option-list';
    import getTubeColor from '../../foreSpinPrd/foreSpinningPlan/components/form-box/get-tube-color';
    import machineTechnologyDetailDialog from './machine-technology-detail-dialog';

    export default {
        components: {
            machineTechnologyDetailDialog
        },
        mixins: [getTubeColor],
        props: {
            dataList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                technologyOrderItem: {},
                technologyDetailDialogState: false,
                openStateList: openStateList

            };
        },
        methods: {
            onVisibleChangeOfTechnologyDetailDialog(e) {
                this.technologyDetailDialogState = e;
            },
            onSeeSpecBtn(item) {
                this.technologyOrderItem = {
                    productName: item.productName,
                    batchCode: item.batchCode,
                    processName: item.processName,
                    machineName: item.machineName,
                    machineModelName: item.machineModelName,
                    spinTypeName: item.spinTypeName,
                    code: item.specSheet ? item.specSheet.code : '',
                    specSheetParamList: item.specSheet ? item.specSheet.specSheetParamList : []
                };
                this.technologyDetailDialogState = true;
            },
            setTagType(taskItem) {
                let type = '';
                if (taskItem.openingState === 0) {
                    type = 'info';
                } else if ([1, 2].includes(taskItem.openingState)) {
                    type = 'primary';
                } else if (taskItem.openingState === 3) {
                    type = 'success';
                } else if (taskItem.openingState === 4) {
                    type = 'danger';
                }
                return type;
            },
            onJump(id, url) {
                this.$toOtherRouter({
                    name: url,
                    query: {
                        id
                    }
                });
            }
        }
    };
</script>
<style scoped lang="scss">
.task-list-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    .task-list-item {
        display: flex;
        align-items: center;
        .task-list-item_label {
            font-weight: 300;
            margin-right: 3px;
        }
        .task-list-item_val {
            font-weight: 500;
        }
    }
}
</style>
